<template>
	<view class="index-view">
		<block v-if="!show">
			<view class="top-bar" v-show="currentIndex != 0"><uni-navbar :fixed="true" :back="false" color="#fff" :title="title"></uni-navbar></view>

			<view v-show="currentIndex == 0">
				<view class="logo-box">
					<view class="logo-ttl" :style="{ 'padding-top': statusBarHeight }">
						<view class="h1">{{ title }}</view>
						<view class="banner"><u-swiper :list="swiperList" mode="none" height="280" @click="swiperClick"></u-swiper></view>
						<view class="bg-img"><image src="/static/img/index_bg01.png" mode="widthFix"></image></view>
					</view>
				</view>

				<!-- <view class="index-card">
					<u-row class="card-link" gutter="0" align="top">
						<u-col span="3" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=90')">
							<view hover-class="none" class="link-item">
								<image class="image" src="/static/img/index_icon01.png" mode="aspectFill"></image>
								<view class="text">人大概况</view>
							</view>
						</u-col>
						<u-col span="3" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=7')">
							<view hover-class="none" class="link-item">
								<image class="image" src="/static/img/index_icon02.png" mode="aspectFill"></image>
								<view class="text">代表会议</view>
							</view>
						</u-col>
						<u-col span="3" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=79')">
							<view hover-class="none" class="link-item">
								<image class="image" src="/static/img/index_icon03.png" mode="aspectFill"></image>
								<view class="text">常委会会议</view>
							</view>
						</u-col>
						<u-col span="3" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=13')">
							<view hover-class="none" class="link-item">
								<image class="image" src="/static/img/index_icon04.png" mode="aspectFill"></image>
								<view class="text">代表工作</view>
							</view>
						</u-col>
						<u-col span="3" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=21')">
							<view hover-class="none" class="link-item">
								<image class="image" src="/static/img/index_icon05.png" mode="aspectFill"></image>
								<view class="text">立法园地</view>
							</view>
						</u-col>
						<u-col span="3" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=28')">
							<view hover-class="none" class="link-item">
								<image class="image" src="/static/img/index_icon06.png" mode="aspectFill"></image>
								<view class="text">县镇人大</view>
							</view>
						</u-col>
						<u-col span="3" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=27')">
							<view hover-class="none" class="link-item">
								<image class="image" src="/static/img/index_icon07.png" mode="aspectFill"></image>
								<view class="text">理论研究会</view>
							</view>
						</u-col>
						<u-col span="3" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=26')">
							<view hover-class="none" class="link-item">
								<image class="image" src="/static/img/index_icon08.png" mode="aspectFill"></image>
								<view class="text">人大要闻</view>
							</view>
						</u-col>
					</u-row>
				</view> -->

				<view class="index-box">
					<view class="link-inner w1">
						<view class="link-item" @click="navTo('/pagesA/condi/site_list')"><image class="image" src="/static/img/nav_01.png" mode="widthFix"></image></view>
					</view>
					<view class="link-inner">
						<!-- 立法征询 -->
						<view class="link-item" @click="navTo('/pagesA/legislation/list')"><image class="image" src="/static/img/nav_02.png" mode="widthFix"></image></view>
						<!-- 网上信访 -->
						<view class="link-item" @click="navTo('/pagesB/petition/list')"><image class="image" src="/static/img/nav_03.png" mode="widthFix"></image></view>
					</view>
					<view class="link-inner w2">
						<view class="link-item" @click="navTo('/pagesB/question/list')"><image class="image" src="/static/img/nav_04.png" mode="widthFix"></image></view>
					</view>
				</view>

				<!-- <u-tabs class="uTabs" :list="tabsList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false"></u-tabs> -->
				<!-- <view class="h2-row">
					<view class="h2-title">通知公告</view>
					<view class="h2-col" @click="navTo('/pagesB/notice/list')">查看更多</view>
				</view> -->

				<!-- <view class="list-box" :style="{ background: Notice.loading == 'nodata' ? 'none' : '#fff' }">
					<view class="list-info_01" v-for="(item, index) of Notice.list" :key="item.id" @click="navTo('/pagesB/notice/detail?id=' + item.id)">
						<view class="info-title">{{ item.title }}</view>
						<view class="info-btm">
							<view class="btm-left clamp">
								<text class="left-name">{{ item.userName }}</text>
								<text class="left-time">{{ item.createTime | parseTime('{y}-{m}-{d}') }}</text>
							</view>
						</view>
					</view>
					<u-loadmore :status="Notice.loading" />
				</view> -->

				<!-- <u-back-top :scroll-top="scrollTop" top="200"></u-back-top> -->
			</view>
			<!-- <view v-show="currentIndex == 1">
				<view class="container">
					<u-cell-group class="news-list">
						<u-cell-item class="list-item" title="选举任免" :arrow="false" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=94')">
							<image slot="icon" class="list-icon" src="/static/img/news_1@2x.png" mode="scaleToFill"></image>
							<view slot="right-icon" class="right-icon">查看</view>
						</u-cell-item>
						<u-cell-item class="list-item" title="专门委员会" :arrow="false" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=95')">
							<image slot="icon" class="list-icon" src="/static/img/news_2@2x.png" mode="scaleToFill"></image>
							<view slot="right-icon" class="right-icon">查看</view>
						</u-cell-item>
						<u-cell-item class="list-item" title="预算监督" :arrow="false" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=96')">
							<image slot="icon" class="list-icon" src="/static/img/news_3@2x.png" mode="scaleToFill"></image>
							<view slot="right-icon" class="right-icon">查看</view>
						</u-cell-item>
						<u-cell-item class="list-item" title="预决算公开" :arrow="false" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=97')">
							<image slot="icon" class="list-icon" src="/static/img/news_4@2x.png" mode="scaleToFill"></image>
							<view slot="right-icon" class="right-icon">查看</view>
						</u-cell-item>
						<u-cell-item class="list-item" title="文献资料" :arrow="false" @click="newsTo('https://wd.tanghecms.com/index.php?m=home&c=Lists&a=index&tid=98')">
							<image slot="icon" class="list-icon" src="/static/img/news_5@2x.png" mode="scaleToFill"></image>
							<view slot="right-icon" class="right-icon">查看</view>
						</u-cell-item>
					</u-cell-group>
				</view>
			</view> -->
			<view v-show="currentIndex == 1">
				<view class="info-box">
					<view class="sub-box">
						<image class="sub-img" :src="$imagePreview(userInfo.imagePath)" mode="aspectFill"></image>
						<view class="sub-info">
							<view class="clamp">{{ userInfo.sysUser ? userInfo.sysUser.userName : '游客' }}</view>
							<view class="sub-node">
								<text class="txt">{{ userInfo.roleNames ? userInfo.roleNames[0] : '群众' }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="container">
					<u-cell-group class="link-list">
						<!-- <u-cell-item title="基本信息" @click="navTo('/pages/load/info')"><image slot="icon" class="list-icon" src="/static/img/icon_17.png" mode="widthFix"></image></u-cell-item> -->
						<u-cell-item title="信访码查询" @click="navTo('/pagesB/petition/search')"><image slot="icon" class="list-icon" src="/static/img/icon_20.png" mode="widthFix"></image></u-cell-item>
						<u-cell-item title="小程序码" name="app" @click="navTo('/pages/user/app')"><image slot="icon" class="list-icon" src="/static/img/icon_19.png" mode="widthFix"></image></u-cell-item>
						<u-cell-item title="切换登录" @click="loginOut" :borderBottom="false"><image slot="icon" class="list-icon" src="/static/img/icon_23.png" mode="widthFix"></image></u-cell-item>
					</u-cell-group>
				</view>
			</view>

			<u-tabbar v-model="current" :list="tabList" @change="tabChange"></u-tabbar>
		</block>
		<block v-else>
			<view class="fiexd-box">
				<view class="code-box">
					<image class="code-logo" src="/static/img/logo_s.png" mode="aspectFill"></image>
					<view class="code-item">
						<view class="clamp" :class="clientCode == 3707 ? 'active' : ''" @click="codeTap(3707)">潍坊市</view>

						<view class="clamp" :class="clientCode == 370705 ? 'active' : ''" @click="codeTap(370705)">奎文区</view>
						<view class="clamp" :class="clientCode == 370702 ? 'active' : ''" @click="codeTap(370702)">潍城区</view>
						<view class="clamp" :class="clientCode == 370704 ? 'active' : ''" @click="codeTap(370704)">坊子区</view>
						<view class="clamp" :class="clientCode == 370703 ? 'active' : ''" @click="codeTap(370703)">寒亭区</view>
						<view class="clamp" :class="clientCode == 370781 ? 'active' : ''" @click="codeTap(370781)">青州市</view>

						<view class="clamp" :class="clientCode == 370782 ? 'active' : ''" @click="codeTap(370782)">诸城市</view>
						<view class="clamp" :class="clientCode == 370783 ? 'active' : ''" @click="codeTap(370783)">寿光市</view>
						<view class="clamp" :class="clientCode == 370784 ? 'active' : ''" @click="codeTap(370784)">安丘市</view>
						<view class="clamp" :class="clientCode == 370785 ? 'active' : ''" @click="codeTap(370785)">高密市</view>
						<view class="clamp" :class="clientCode == 370786 ? 'active' : ''" @click="codeTap(370786)">昌邑市</view>

						<view class="clamp" :class="clientCode == 370724 ? 'active' : ''" @click="codeTap(370724)">临朐县</view>
						<view class="clamp" :class="clientCode == 370725 ? 'active' : ''" @click="codeTap(370725)">昌乐县</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			title: '潍坊市人大代表履职通',
			statusBarHeight: '0',
			text: '',
			swiperList: [],
			tabList: [
				{
					iconPath: '/static/img/icon-h.png',
					selectedIconPath: '/static/img/icon-h-h.png',
					text: '首页',
					title: '潍坊市人大代表履职通',
					customIcon: false
				},
				// {
				// 	iconPath: '/static/img/icon-w.png',
				// 	selectedIconPath: '/static/img/icon-w-h.png',
				// 	text: '资讯',
				// 	title: '资讯',
				// 	customIcon: false
				// },
				{
					iconPath: '/static/img/icon-i.png',
					selectedIconPath: '/static/img/icon-i-h.png',
					text: '我的',
					title: '我的',
					customIcon: false
				}
			],

			show: false,
			sdtCode: '',
			clientCode: '3707',
			currentIndex: 0,
			current: 0,
			scrollTop: 0,
			tabsCurrent: 0,
			tabsList: [
				{
					name: '邀您协商',
					count: '0'
				},
				{
					name: '结果公示',
					count: '0'
				}
			],
			Notice: {
				list: [],
				pageNum: 1,
				pageSize: 10,
				readType: '',
				announcements: {
					dataType: '1',
					title: ''
				},
				loaded: false,
				loading: 'loadmore'
			},
			list: [],
			param: {
				title: '',
				nodeStatus: '1'
			},
			loading: 'loadmore'
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.loadData();

		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
		console.log(this.statusBarHeight);

		if (option && option.code) {
			this.sdtCode = option.code;
			this.show = true;
		}
	},
	onShow() {
		this.loadLogin();
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onShareAppMessage(res) {
		return {
			title: this.title,
			path: '/pages/load/index'
		};
	},
	onShareTimeline(res) {
		return {};
	},
	onReachBottom() {
		if (this.currentIndex == 0 && this.Notice.loading == 'loadmore') this.loadNotice('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.userInfoId) {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
			this.clientCode = '3707';
			this.pageNum = 1;
			this.pageSize = 10;
		},
		loadData(type = 'add') {
			this.getBanner();
			this.getBaiduToken();
			// this.loadDict('tip', 'tip');
			// this.loadNotice(type);
		},
		loadNotice(type = 'add') {
			if (type == 'add') {
				if (this.Notice.loading == 'nomore') {
					return false;
				}
				this.Notice.loading = 'loading';
			} else {
				this.Notice.loading = 'loading';
			}
			if (type != 'add') {
				this.Notice.pageNum = 1;
			}
			let data = {
				pageNum: this.Notice.pageNum,
				pageSize: this.Notice.pageSize,
				currentUserId: this.userId,
				roleCodes: this.roleCodes,
				clientCode: this.clientCode,
				readType: this.Notice.readType,
				announcements: this.Notice.announcements
			};
			this.$request('/announcements/myList', data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.Notice.list = [];
				}

				this.Notice.loading = this.Notice.pageNum < Math.ceil(res.data.total / this.Notice.pageSize) ? 'loadmore' : 'nomore';
				this.Notice.pageNum = this.Notice.pageNum + 1;
				this.Notice.list = this.Notice.list.concat(res.data.records);
				this.Notice.loaded = true;
				if (this.Notice.list.length <= 0) {
					this.Notice.loading = 'nodata';
				}
			});
		},
		getBaiduToken() {
			this.$request('/baidu/ttsToken', {
				clientCode: this.clientCode,
				userId: this.userId
			}).then((res) => {
				uni.setStorageSync('baiduToken', res.data);
			});
		},
		getBanner() {
			let list = uni.getStorageSync('swiperList');
			if (list > 0) {
				this.swiperList = list;
				return false;
			}
			this.$request('/banner/list', {
				clientCode: this.clientCode,
				userId: this.userId,
				banner: {
					enable: '1'
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.swiperList = [];
				res.data.records.forEach((item) => {
					if (item.fileList && item.fileList.length > 0) {
						this.swiperList.push({
							id: item.id,
							title: item.title,
							url: item.externalLink,
							image: this.$imagePreview(item.fileList[0].path)
						});
					}
				});
				uni.setStorageSync('swiperList', this.swiperList);
			});
		},
		swiperClick(index) {
			// this.current = index;
			if (this.swiperList[index].id) {
				uni.navigateTo({
					url: '/pagesA/banner/detail?id=' + this.swiperList[index].id
				});
			}
		},
		codeTap(e) {
			this.clientCode = e;
			let data = {
				code: this.sdtCode,
				clientCode: e
			};
			this.$request('/shandongtong', data).then((res) => {
				if (res.data.msg && res.data.msg.indexOf('手机号未注册') != -1) {
					uni.showModal({
						title: '提示',
						confirmText: '拨打电话',
						content: '您输入的手机号在平台中没有匹配到，无法核实您的信息，请联系管理员解决！',
						success: (res) => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: this.tel
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				}

				if (!res.data.Authorization) {
					this.$msg('登录失败！');
					return false;
				}
				let userInfo = res.data;
				this.$store.commit('login', userInfo);

				uni.reLaunch({
					url: '/pages/index/index'
				});
			});
		},
		tabChange(index) {
			// let url = this.tabList[index].pagePath;
			// this.goTo(url);
			if (!this.userInfo.Authorization && index == 2) {
				uni.showModal({
					title: '提示',
					content: '请先登录！',
					success: (res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/login/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return false;
			}
			this.currentIndex = index;
			this.title = this.tabList[index].title;
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		tabsChange(index) {
			this.tabsCurrent = index;
		},
		loginOut() {
			this.$store.commit('logout');
			uni.reLaunch({
				url: '/pages/login/index'
			});
		},
		newsTo(src) {
			let url = '/pages/load/news?src=' + encodeURIComponent(src);
			uni.navigateTo({
				url: url
			});
		},
		navTo(url) {
			if (this.userInfo.Authorization) {
				uni.navigateTo({
					url: url
				});
			} else {
				this.$store.commit('logout');
				uni.showModal({
					title: '提示',
					content: '请先登录！',
					success: (res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/login/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.top-bar {
	display: block;
}

.logo-box {
	// text-align: center;

	.logo-ttl {
		position: relative;
		padding: 40rpx 30rpx 20rpx;
		// height: 500rpx;
	}

	.h1 {
		position: relative;
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		line-height: 88rpx;
		z-index: 1;
	}

	.h1-img {
		position: relative;
		margin: 250rpx auto 0;
		width: 706rpx;
		height: 216rpx;
		z-index: 1;

		.image {
			width: 706rpx;
			height: 216rpx;
		}
	}

	.bg-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.bg-img_small {
		position: relative;
		margin: 80rpx auto 0;
		width: 680rpx;
		height: 280rpx;
		z-index: 10;
	}
}

.banner {
	position: relative;
	margin: 60rpx auto 0;
	padding: 0;
	min-height: 280rpx;
	z-index: 10;
}

.list-box {
	padding: 0 30rpx;
	background-color: #fff;
}

.index-card {
	position: relative;
	margin: 0 30rpx 20rpx;
	padding: 30rpx 0 10rpx;
	border-radius: 12rpx;
	background-color: #fff;

	.card-ttl {
		margin-bottom: 16rpx;
		padding-left: 20rpx;
		font-size: 16px;
		font-weight: bold;
		color: #444;
		border-left: 10rpx solid #f00;
	}

	.card-box {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0 10rpx;
		border-top: 1rpx solid #ebebeb;

		.card-item {
			width: 190rpx;
		}
	}

	.card-link {
		overflow: hidden;

		.image {
			margin: 0 auto 12rpx;
			width: 100rpx;
			height: 100rpx;
			object-fit: contain;
		}

		.link-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-bottom: 20rpx;
			min-height: 160rpx;
			font-size: 14px;
			line-height: 1.1;
			text-align: center;
		}
	}
}

.index-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 20upx;
	padding: 20upx 30upx;
	background-color: #fff;

	.link-inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 400upx;

		&.w1 {
			width: 268rpx;
		}

		&.w2 {
			margin-top: 20upx;
			width: 690rpx;
		}
	}

	.link-item {
		display: block;
		width: 100%;

		.image {
			width: 100%;
		}
	}
}

.news-list {
	display: block;
	padding-top: 20rpx;
	overflow: hidden;
	// background-color: #fff;

	.list-item {
		display: flex;
		overflow: hidden;
		margin-bottom: 20rpx;
		font-size: 16px;
		line-height: 64rpx;
		border-radius: 10rpx;
		// border-bottom: 20rpx solid $u-border-color;
	}

	.list-icon {
		width: 64rpx;
		height: 64rpx;
		margin-right: 16rpx;
	}

	.right-icon {
		width: 100rpx;
		height: 40rpx;
		font-size: 10px;
		color: #ce2d2c;
		line-height: 40rpx;
		text-align: center;
		border-radius: 20rpx;
		background: #ffecec;
	}
}

.link-list {
	margin-bottom: 30rpx;
	border-radius: 30rpx;
	overflow: hidden;
	background-color: #fff;

	.list-item {
		font-size: 28rpx;
		line-height: 72rpx;
	}

	.list-icon {
		width: 15px;
		margin-right: 16rpx;
	}
}

.pro-row {
	.pro-title {
		margin-bottom: 20rpx;
		font-size: 15px;
		color: #e5231a;
	}
}

.h2-row {
	margin: 0;
	padding: 20rpx 30rpx;
	border: 0;
	background-color: #fff;
}

.info-box {
	padding-top: 20rpx;
}

.code-box {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	background-color: #fff;

	.code-logo {
		display: block;
		margin: 66rpx auto 48rpx;
		width: 160rpx;
		height: 160rpx;
	}

	.code-item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 66rpx;

		.clamp {
			margin-bottom: 40rpx;
			max-width: 48%;
			width: 300rpx;
			height: 92rpx;
			font-size: 17px;
			color: #e5231a;
			line-height: 88rpx;
			border-radius: 8rpx;
			text-align: center;
			border: 1rpx solid #e5231a;
		}

		.active {
			color: #fff;
			background-color: #e5231a;
		}
	}
}
</style>
